<template>
	<view class="container">
		<view class="category-menu">
			<div v-for="(category, index) in categories" :key="index" class="category-item"
				:class="{ 'active': currentCategory === category }" @click="changeCategory(category)">
				{{ category }}
			</div>
		</view>
		<view class="cuisine-list">
			<div v-for="cuisine in selectCuisines" :key="cuisine.id">
				<div class="cuisine-item" v-if="currentCategory === '全部' || cuisine.category === currentCategory">
					<div class="cuisine-name">{{ cuisine.name }}</div>
					<div class="cuisine-description">{{ cuisine.description }}</div>
					<div class="cuisine-price">￥{{ cuisine.price }}</div>
					<div class="cuisine-image">
						<img :src="cuisine.image" alt="菜品图片" />
					</div>
				</div>
			</div>
		</view>
	</view>
</template>

<script>
export default {
	data() {
		return {
			currentCategory: '全部',
			categories: ['全部', '川菜', '粤菜', '鲁菜', '淮扬菜'],
			cuisines: [
				{ id: 1, name: '宫保鸡丁', category: '川菜', price: 28, description: '经典川菜，鸡肉鲜嫩，花生米香脆', image: '../../static/imgs/5.jpg', quantity: 0 },
				{ id: 2, name: '白切鸡', category: '粤菜', price: 38, description: '皮黄肉白，肥嫩鲜美', image: '../../static/imgs/6.jpg', quantity: 0 },
				{ id: 3, name: '糖醋鲤鱼', category: '鲁菜', price: 48, description: '外脆里嫩，酸甜可口', image: '../../static/imgs/4.jpg', quantity: 0 },
				{ id: 4, name: '清炖狮子头', category: '淮扬菜', price: 32, description: '肥而不腻，入口即化', image: '../../static/imgs/3.jpg', quantity: 0 }
			],
			selectCuisines: []
		}
	},
	onLoad() {
		this.selectCuisines = this.cuisines
	},
	methods: {
		changeCategory(category) {
			console.log('changeCategory', category)
			this.currentCategory = category
			this.selectCuisines = this.cuisines.filter(item => item.category === category || category === '全部')
		}
	}
}
</script>

<style>
.container {
	display: flex;
}

.category-menu {
	width: 20%;
	height: 100%;
	background-color: #f5f5f5;
}

.category-item {
	padding: 10px;
	cursor: pointer;
}

.active {
	background-color: #fff;
	font-weight: bold;
}

.cuisine-list {
	width: 80%;
	height: calc(100vh - 60px);
	margin-left: 10px;
	border-left: 1px solid #ccc;
	overflow-y: auto;
}

.cuisine-item {
	margin-bottom: 20px;
	padding: 10px;
	/* border: 1px solid #ccc; */
	border-radius: 5px;
}

.cuisine-name,
.cuisine-description,
.cuisine-price {
	margin-bottom: 5px;

}

.cuisine-name {
	font-size: 18px;
	font-weight: bold;
}

.cuisine-description {
	font-size: 14px;
	color: #666;
}

.cuisine-price {
	font-size: 16px;
	color: #f00;
}

.cuisine-image img {
	width: 100%;
}
</style>
